<!-- 数据展示图 -->
<template>
  <div class="p-6">
    <!-- 第一行 - 搜索总量居中 -->
    <div class="flex justify-center items-center mb-4">
      <div class="text-slate-300 text-center">
        搜索总量：
        <span ref="totalCountTarget"
          class="text-gradient font-[Electronic] text-7xl ml-2 mr-2 font-bold">679,473,929</span>
        条记录
      </div>
    </div>

    <!-- 第二行 - 好评总量和差评总量在右下角 -->
    <!-- <div class="flex justify-end">
      <div class="flex flex-row gap-6">
        <div class="text-slate-400 text-sm text-center">
          好评总量：
          <span ref="goodNum" class="font-[Electronic] text-[#5dc5ef] text-2xl">8,778,988</span>
        </div>
        <div class="text-slate-400 text-sm text-center">
          差评总量：
          <span ref="badNum" class="font-[Electronic] text-[#5dc5ef] text-2xl">8,778,988</span>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script setup>
  import { ref, onMounted ,watch} from 'vue'
  import { CountUp } from 'countup.js'

  const props = defineProps({
    data: {
      typeof: Object,
      required: true,
    }
  })

  const totalCountTarget = ref(null)
  const goodNum = ref(null)
  const badNum = ref(null)

  const startCountUp = () => {
    if (totalCountTarget.value) {
      new CountUp(totalCountTarget.value, props.data.total).start()
    }
    if (goodNum.value) {
      new CountUp(goodNum.value, props.data.goodNum).start()
    }
    if (badNum.value) {
      new CountUp(badNum.value, props.data.badNum).start()
    }
  }

  onMounted(() => {
    startCountUp()
  })

  // 监听 props.data 的变化
  watch(() => props.data, startCountUp)
</script>
<style lang="scss" scoped>

</style>